<template>
  <div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">

      <el-upload
          name="multipartFiles"
          ref="upload"
          :headers="header"
          :file-list="fileList"
          style="margin-bottom: 30px"
          accept=".docx"
          limit="1"
          drag
          :data="upData"
          :on-success="success"
          :on-error="fail"
          :auto-upload="false"
          :before-upload="upBefore"
          :action="baseUrl+'/admin/uploadPractice'"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传docx文件，且不超过10Mb</div>
      </el-upload>
      <div>
        <h2>输入文档标题</h2>
        <el-input v-model="upData.title" maxlength="15" show-word-limit placeholder="请输入内容"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="upDocSubmit">确 定</el-button>
  </span>
    </el-dialog>

    <el-button @click="upDoc" style="margin-left: 1%" type="primary" size="mini">添加习题</el-button>
    <br><br>
    <div class="docs" v-for="(item,index) in docs">
      <div class="img">
        <img src="../../assets/img/word_logo.png" alt="">
      </div>
      <div class="content">
        <h5 style="float: left">{{item.title}}</h5>
        <el-button  @click="deleteDoc(item.id)" style="margin-top: 6px;float: right" size="mini" ><i class="el-icon-delete"></i></el-button>
        <el-button @click="downDocs(item.id)" style="margin-top: 6px;float: right;margin-right: 30px" size="mini"><i class="el-icon-download"></i></el-button>
        <a id="doclink" ref="doclink" :href="url"></a>
        <h5 style="float: right;margin-right: 30px">{{item.createTime|formatDate}}</h5>
      </div>
    </div>
  </div>

</template>

<script>
import {getPractice,delDoc,toDoc,downDoc} from "../../network/admin"
import {baseUrl} from "../../network/baseUrl";
import * as file from "mammoth";

export default {
  name:'practice',
  data(){
    return{
      baseUrl:baseUrl(),
      dialogVisible:false,
      url:'',
      upData:{
        title:''
      },
      header:{
        token:localStorage.getItem('TOKEN')
      },
      docs:[],
      fileList:[],
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData(){
      getPractice(1)
          .then(res=>{
            console.log(res)
            this.docs=res.data.extend.page.records
          })
    },
    upBefore(file){
      let testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'docx'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if(!extension) {
        this.$message.warning("上传文件只能是docx格式!")
        return false
      }else {
        return true
      }
    },
    deleteDoc(id){
      delDoc(id)
          .then(res=>{
            console.log(res)
            this.$message.success("删除成功!")
            this.getData()
          })
    },
    upDoc(){
      this.dialogVisible=true
      this.upData.title=''
      this.fileList=[]
    },
    upDocSubmit(){
      if(!this.upData.title){
        this.$message.warning("请填写标题~")
      }else {
        this.$refs.upload.submit()
      }

    },
    downDocs(id){
      this.url=baseUrl()+'/admin/downloadPractice/'+id
      setTimeout(()=>{
        document.getElementById("doclink").click()
      },100)

    },
    success(res){

        if(res.code===100){
          this.$message.success("提交成功!")
          this.dialogVisible=false
          this.getData()
        }else {
          this.$message.warning(res.msg)
        }

    },
    fail(){
      this.$message.warning("上传失败!")
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
  }

}
</script>

<style scoped>
.docs h5{
  padding: 0;
  margin: 0;
}
.docs{
  cursor: pointer;
  width: 100%;
  height: 40px;
  transition: all .1s;
  border-bottom: 1px solid gainsboro;
}
.docs:hover{
  background-color: gainsboro;
}
.docs .img{
  float: left;
  height: 100%;
  width: 60px;
}
.docs img{
  height: 100%;
  width: 100%;
}
.content{
  float: left;
  height: 100%;
  width: 80%;
}
.content h5{
  line-height: 40px;
}
</style>

